<template>
  <view style="width: 100%; min-height: 100vh; background-color: rgba(255,255,255,1);">
    <view class="bg-white" style="width: 100%; position: fixed; top: 0; z-index: 999;"
          :style="'height:'+custom_bar+'px'"></view>
    <view id="search" class="cu-bar search bg-white fixed" style="width: 100%; border: none;position: relative;"
          :style="'top:'+custom_bar+'px'">
      <view class="action">
        <image class="head-img" src="/static/icon/index/xingzhuang@2x.png" @click="handleToMessage()"></image>
        <view v-if="!self_data && self_data.is_read" class="action-active"></view>
      </view>
    </view>
    <view style="width: 100%; position:relative;">
      <view>
        <image src="/static/image/me_bg_01@2x.png" style="width: 750upx; height: 526upx;"></image>
        <view class="flex align-center card-top">
          <image class="top-img" :src="self_data.avatar || 'http://twst.isart.me/o_1ej1tutmv1isaddsc61mh01csg9.png'" mode="aspectFill" @click="handlePreviewImgs(self_data.avatar)"></image>
          <view class="top-name">{{self_data.nick_name}}</view>
          <view class="top-button flex align-center justify-center" @click="handleToEdit()">编辑资料</view>
        </view>
        <view class="flex justify-around align-center card-type">
          <view class="bottom-item justify-center" v-for="(item,index) in card_type" :key="index" @click="handleToCardType(index)">
            <view style="color: #FFFFFF;font-size: 36upx; text-align: center;">{{item.num}}</view>
            <view style="color: #FFFFFF;font-size: 36upx; text-align: center;">{{ item.name }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="content-top flex justify-between flex-direction">
        <view class="flex align-center justify-between" :class="index != content_top_list.length -1?'top-item':''"
              @click="handleToTopList(index)" v-for="(item, index) in content_top_list" :key="index">
          <view class="item-left flex align-center justify-center">
            <image class="left-img" :src="item.img" mode=""></image>
            <text class="left-text">{{ item.name }}</text>
          </view>
          <view class="item-right flex align-center justify-center">
            <image class="right-img" src="/static/icon/icon_more@2x.png" mode=""></image>
          </view>
        </view>
      </view>
      <view style="width: 100%; height: 1px; background-color: #F8F8F8; margin: 28upx 0;"></view>
      <view class="content-top flex justify-between flex-direction">
        <view class="top-item flex align-center justify-between"
              :class="index != content_bottom_list.length -1?'top-item':''" @click="handleToBottomList(index)"
              v-for="(item, index) in content_bottom_list" :key="index">
          <view class="item-left flex align-center justify-center">
            <image class="left-img" :src="item.img" mode=""></image>
            <text class="left-text">{{ item.name }}</text>
          </view>
          <view class="item-right flex align-center justify-center">
            <image class="right-img" src="/static/icon/icon_more@2x.png" mode=""></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {accountUser_getById} from "api/my/my"
export default {
  data() {
    return {
      random_name: '', //随机名字
      custom_bar: 0, //通知栏高度
      self_data: {}, //自己的数据
      card_type: [
        {
          name: '关注',
          num: ''
        },
        {
          name: '粉丝',
          num: ''
        },
        {
          name: '点赞',
          num: ''
        },
      ],//card
      content_top_list: [
        {
          name: '我的收藏',
          img: '/static/icon/my/me_icon_shoucang@2x.png'
        },
        {
          name: '我的评价',
          img: '/static/icon/my/ico_home_appraise@2x.png'
        },
        {
          name: '我的作品',
          img: '/static/icon/my/wenjianjia@2x.png'
        },
      ],//上半部内容
      content_bottom_list: [
        {
          name: '我的教程',
          img: '/static/icon/my/dingdan-3@2x.png'
        },
        {
          name: '我的订单',
          img: '/static/icon/my/dingdan@2x.png'
        },
        {
          name: '我的拜师',
          img: '/static/icon/my/me_icon_baishi@2x.png'
        },
        {
          name: '学习记录',
          img: '/static/icon/my/wenjian@2x.png'
        },
        {
          name: '提现管理',
          img: '/static/icon/my/tixian.png'
        },
        {
          name: '分享艺一帮',
          img: '/static/icon/my/fenxiang@2x.png'
        },
        {
          name: '设置艺一帮',
          img: '/static/icon/my/shezhi-2@2x.png'
        },
      ] //下半部内容
    }
  },
  methods: {
    //初始化
    pageInit(account_user_id){
      accountUser_getById({account_user_id}).then(res=>{
        console.log(res)
        this.self_data = res && res.data;
        if(!this.self_data.nick_name){
          this.self_data.nick_name = `游客${this.random_name}`
        }
        this.card_type[0].num = res.data && res.data.attention_num || '0';
        this.card_type[1].num = res.data && res.data.fan_num || '0';
        this.card_type[2].num = res.data && res.data.zan_num || '0';
      }).catch(err=>{
        console.log(err)
      })
    },
    randomWord(randomFlag, min, max){
      let str = "",
          range = min,
          arr = [
            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l',
            'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L',
            'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z','0', '1', '2', '3', '4', '5', '6', '7', '8', '9',];

      if (randomFlag) {
        range = Math.round(Math.random() * (max - min)) + min;// 任意长度
      }
      for (let i = 0; i < range; i++) {
        let pos = Math.round(Math.random() * (arr.length - 1));
        str += arr[pos];
      }
      return str;
    },
    //预览图片
    handlePreviewImgs(img){
      uni.previewImage({
        urls: [img]
      });
    },
    /**
     * @name 跳转消息页
     */
    handleToMessage() {
      this.$uniNavigateTo({
        url: '/pages/news/news'
      })
    },
    /**
     * @name 跳转卡片类型
     */
    handleToCardType(index) {
      switch (index) {
        case 0:
          this.$uniNavigateTo({
            url: '/pages/my/myAttention/myAttention'
          })
          break;
        case 1:
          this.$uniNavigateTo({
            url: '/pages/my/myFans/myFans'
          })
          break;
        case 2:
          this.$uniNavigateTo({
            url: '/pages/my/myLike/myLike'
          })
          break;
      }
    },
    /**
     * @name 跳转编辑
     */
    handleToEdit() {
      this.$uniNavigateTo({
        url: '/pages/my/editMyData/editMyData',
        query:{
          name: `游客${this.random_name}`
        }
      })
    },
    /**
     * @name 上半部内容跳转
     * @param {Object} index 索引值
     */
    handleToTopList(index) {
      const jump_url_obj = [
        '/pages/my/myCollect/myCollect',
        '/pages/my/myComment/myComment',
        '/pages/my/myCreation/myCreation'
      ]
      this.$uniNavigateTo({
        url: jump_url_obj[index]
      })
    },
    /**
     * @name 下半部内容跳转
     * @param {Object} index 索引值
     */
    handleToBottomList(index) {
      const jump_url_obj = [
        '/pages/my/myTutorials/myTutorials',
        '/pages/my/myOrder/myOrder',
        '/pages/my/myTeacher/myTeacher',
        '/pages/my/learningRecords/learningRecords',
        '/pages/my/withdrawalManage/withdrawalManage',
        '/pages/my/shareYiBang/shareYiBang',
        '/pages/my/setUp/setUp'
      ]
      this.$uniNavigateTo({
        url: jump_url_obj[index]
      })
    },
  },
  onLoad(){
    this.random_name = this.randomWord(true, 1,5);
    const jyJPush = uni.requireNativePlugin("JY-JPush");
    jyJPush.addJYJPushReceiveNotificationListener(result=> {
//  监听成功后，若收到推送，会在result返回对应的数据；数据格式保持极光返回的安卓/iOS数据一致
      console.log(result)
      this.is_read = 1;
    });
  },
  onShow() {
    this.custom_bar = uni.getStorageSync('system_info').statusBarHeight;
    let user_info = uni.getStorageSync('user_info')
    console.log(user_info);
    this.pageInit(user_info.id);
  },
  //下拉刷新
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  }
}
</script>

<style lang="less" scoped>
/deep/ .cu-bar {
  height: 130upx;
}

/deep/ .cu-bar.fixed, .nav.fixed {
  box-shadow: none;
}

/deep/ .cu-bar .search-form {
  height: 70upx;
  border: 2upx solid #EDEDED;
  background-color: white;
}

.action {
  position: absolute;
  right: 30upx;
}

.action-active {
  width: 16upx;
  height: 16upx;
  background-color: rgba(229, 39, 24, 1);
  border-radius: 50%;
  position: absolute;
  top: 46upx;
  right: 2upx;
}

.head-img {
  width: 40upx;
  height: 44upx;

}

.card-top {
  width: 100%;
  padding: 118upx 66upx 0 66upx;
  position: absolute;
  top: 0;
}

.top-img {
  width: 120upx;
  height: 120upx;
  border-radius: 50%;
  border: 4upx solid #FFFFFF;
  margin-left: 44upx;
  background-color: #FFF;
}

.top-name {
  width: 240upx;
  margin-left: 32upx;
  font-size: 36upx;
  color: #FFFFFF;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.top-button {
  width: 120upx;
  height: 56upx;
  border-radius: 28upx;
  font-size: 22upx;
  color: #FFFFFF;
  background-image: linear-gradient(90deg, rgba(251, 63, 48, 1), rgba(255, 110, 86, 1));
  position: absolute;
  right: 114upx;
}

.card-bottom {
  width: 100%;
  margin-top: 56upx;
  padding-bottom: 48upx;
}
.card-type{
  width: 100%;
  padding: 118upx 66upx 0 66upx;
  position: absolute;
  bottom: 128upx;
}
.bottom-item {
  width: 90upx;
  height: 100upx;
  display: flex;
  flex-direction: column;
}

.content {
  margin: 0 58upx;
}


.content-top {
  width: 100%;
  height: 100%;
  padding: 0 18upx;
}

.top-item {
  margin-bottom: 40upx;
}

.left-img {
  width: 36upx;
  height: 36upx;
}

.left-text {
  font-size: 28upx;
  margin-left: 14upx;
  color: rgba(51, 51, 51, 1);
}

.right-img {
  width: 14upx;
  height: 26upx;
}

.content-bottom {
  width: 100%;
  height: 100%;
  padding-top: 38upx;
}
</style>
